/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-11 15:02:50
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-15 16:59:10
 * @Deprecated: 否
 * @FilePath: /blog/src/front/container/component/banner/index.jsx
 */
import React from 'react'
import styles from './index.module.scss'



const Banner = ({ schema }) => {
    const { attributes = {} } = schema;
    const { title, desc, showSmallPic, smallPicUrl, backgroundUrl, backgroundHeight } = attributes;
    // const title = schema?.attributes?.title || 'Roy 的个人博客';
    // const desc = schema?.attributes?.desc || '好记性不如烂笔头。每天记录一点，总会有收获。当你不学习，想要躺平的时候，你就在颓废的边缘，在退步，被别人所淘汰掉。';

    const wrapperStyleObj = backgroundUrl ? { backgroundImage: `url('${backgroundUrl}')` } : {};
    backgroundHeight && (wrapperStyleObj.height = parseInt(backgroundHeight, 10))
    return (
        <div className="wrapper">
            <div className={styles.banner} style={wrapperStyleObj}>
                <div className={styles.person}>
                    {
                        showSmallPic && smallPicUrl ? <img className={styles.avatar} src={smallPicUrl} alt='Roy' /> : null
                    }
                    <div className={styles.content}>
                        <div className={styles.title}>{title}</div>
                        <div className={styles.desc}>{desc}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Banner;